class CarPaymentRecord extends React.Component {
    constructor(props) {
        super(props);
        this.page = 1;
        this.state = {
            list: ''
        }
    }

    componentDidMount() {
        layui.use(['form', 'laypage'], function () {
            this.form = layui.form();
            this.layer = layui.layer;
            this.queryList(1);
            this.refs.buildingSelectList.layuiInitComplete();
            this.refs.buildingSelectList.queryList();
            this.refs.parkSelectList.layuiInitComplete();
        }.bind(this));
    }

    queryList(page) {
        let param = {};
        param.pageSize = 10;
        //保证通过之后还是在当前页
        if (page > 1 && this.state.list.length === 1) {
            param.page = page - 1;
        } else {
            param.page = page;
        }
        param.plateNumber = this.refs.plateNumber.value;
        param.type_code = this.props.typeCode;
        param.parkId = this.refs.parkSelectList.getDefValue();
        this.updateList(param);
    }

    updateList(param) {
        postJson('/car/carPaymentRecord/queryCarPaymentRecordList.x', $.param(param), function (data) {
            this.page = param.page;
            this.setState({
                list: data.list
            });
            if (param.page === 1) {
                layui.laypage({
                    cont: 'contentListPage'
                    , pages: Math.ceil(data.size / param.pageSize)
                    , jump: function (row, first) {
                        if (!first) {
                            param.page = row.curr;
                            this.updateList(param);
                        }
                    }.bind(this)
                });
            }
        }.bind(this))
    }

    tbody() {
        if (this.state.list) {
            return this.state.list.map(function (array) {
                return (<tr>
                    <td>{array.plate_number}</td>
                    <td>{array.car_type}</td>
                    <td>{array.payment_time}</td>
                    <td>{array.payment_amount}</td>
                    <td>{array.payment_type}</td>
                    <td>{array.payment_method}</td>
                    <td>{array.remarks}</td>
                    <td>
                        <button type="button"
                                className="permsRemove layui-btn layui-btn-mini"
                                onClick={() => this.carInfo(array.id)}>详细信息
                        </button>
                    </td>
                </tr>)
            }.bind(this))
        }
    }

    carInfo(id) {

    }

    selectParkCallback(value) {
        this.queryList(1);
    }

    selectCommCallback(commCode) {
        this.refs.parkSelectList.queryList(commCode);
    }

    render() {
        return <div className="box box-primary">
            <div className="box-frame">
                <form id="form" className="layui-form layui-form-pane">

                    <div className="layui-form-item">
                        <BuildingSelectList ref="buildingSelectList" isNotItem={true}
                                            selectCallback={(commCode) => this.selectCommCallback(commCode)}/>
                        <ParkSelectList ref="parkSelectList" isNotItem={true}
                                        selectCallback={(value) => this.selectParkCallback(value)}/>
                        <label className="layui-form-label">车牌号</label>
                        <div className="layui-input-inline">
                            <input className="layui-input" type="text" ref="plateNumber"/>
                        </div>

                        <button type="button"
                                className="permsRemove layui-btn"
                                onClick={() => this.queryList(1)}>查询
                        </button>
                    </div>

                    <div style={{'padding-bottom': '10px'}}>
                        <table className="layui-table">
                            <colgroup>
                                <col width="150"/>
                                <col width="200"/>
                                <col/>
                                <col/>
                                <col/>
                                <col/>
                                <col/>
                                <col width="90"/>
                            </colgroup>
                            <thead>
                            <tr>
                                <th>车牌号</th>
                                <th>车辆类型</th>
                                <th>缴费时间</th>
                                <th>缴费金额</th>
                                <th>缴费类型</th>
                                <th>缴费方式</th>
                                <th>备注</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            {this.tbody()}
                            </tbody>
                        </table>
                        < div style={{'float': 'right', 'margin-right': '1px'}} id="contentListPage"/>
                    </div>
                </form>
                <div style={{clear:"both"}}></div>
            </div>
        </div>
    }
}

ReactDOM.render(
    <CarPaymentRecord/>,
    document.getElementById('example')
);
